<template>
  <div v-loading="loading" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
import resize from './mixins/resize'
import { moneyFormat } from '@/utils/ruoyi'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'DealIndustry'
    },
    dealIndustry: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: 'calc(100% - 40px)'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      loading: false,
      optionData: [
        { value: 1048, name: '大健康' },
        { value: 735, name: '大数据及人工智能' },
        { value: 580, name: '高端制造' },
        { value: 484, name: 'TMT' },
        { value: 300, name: '新能源' }
      ]
    }
  },
  watch: {
    dealIndustry() {
      // 投资成本:investCost;最新估值:valuation;回款金额:receivedAmount;项目数量:dealNumber
      // 项目数量:dealCount 投资成本：fk 回款金额：hk  最新估值：gz
      this.initChart()
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      if (this.dealIndustry) {
        if (this.dealIndustry === 'investCost') {
          this.optionData = this.chartData.map((item) => {
            return {
              name: this.$t(item.industryName),
              value: item.fk,
              dealCount: item.dealCount,
              busType: this.dealIndustry,
              fk: item.fk,
              gz: item.gz,
              hk: item.hk,
              industryFirst: item.industryFirst
            }
          })
        } else if (this.dealIndustry === 'valuation') {
          this.optionData = this.chartData.map((item) => {
            return {
              name: this.$t(item.industryName),
              value: item.gz,
              dealCount: item.dealCount,
              busType: this.dealIndustry,
              fk: item.fk,
              gz: item.gz,
              hk: item.hk,
              industryFirst: item.industryFirst
            }
          })
        } else if (this.dealIndustry === 'receivedAmount') {
          this.optionData = this.chartData.map((item) => {
            return {
              name: this.$t(item.industryName),
              value: item.hk,
              dealCount: item.dealCount,
              busType: this.dealIndustry,
              fk: item.fk,
              gz: item.gz,
              hk: item.hk,
              industryFirst: item.industryFirst
            }
          })
        } else if (this.dealIndustry === 'dealNumber') {
          this.optionData = this.chartData.map((item) => {
            return {
              name: this.$t(item.industryName),
              value: item.dealCount,
              busType: this.dealIndustry,
              dealCount: item.dealCount,
              fk: item.fk,
              gz: item.gz,
              hk: item.hk,
              industryFirst: item.industryFirst
            }
          })
        }
      }
      this.chart = echarts.init(this.$el, null, { renderer: 'svg', useDirtyRect: false })
      this.chart.on('click', this.clickIndustry)
      this.chart.setOption({
        legend: {
          orient: 'vertical',
          right: this.fitChartFont(5),
          y: 'center',
          itemWidth: this.fitChartFont(15),
          itemHeight: this.fitChartFont(10),
          formatter: function(name) {
              return (name.length > 8 ? (name.slice(0, 8) + '...') : name)
          },
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            var str = ''
            if (params.data.busType === 'dealNumber') {
              str = `${params.marker}` + `${params.name}` + '(' + `${params.value}` + '个)' + `<br/>`
            } else {
              str = `${params.marker}` + `${params.name}` + '(' + moneyFormat(`${params.value}`, 'w') + '万)' + `<br/>`
            }
            return str +
              '项目数量(个):' + moneyFormat(params.data.dealCount) + '<br/>' +
              '投资成本(万):' + moneyFormat(params.data.fk, 'w') + '<br/>' +
              '回款金额(万):' + moneyFormat(params.data.hk, 'w') + '<br/>' +
              '最新估值(万):' + moneyFormat(params.data.gz, 'w') + '<br/>'
          }
        },
        color: ['#226FFD', '#FC9200', '#22E8E9', '#0D9241', '#01ACFE'],
        series: [
          {
            type: 'pie',
            radius: ['35%', '48%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: this.fitChartFont(13),
                fontWeight: 'bold',
                formatter: function(p) {
                    return p.data.name + '\n' + (p.data.busType === 'dealNumber' ? p.data.value + '(个)' : moneyFormat(p.data.value, 'w') + '(万)')
                }
              }
            },
            labelLine: {
              show: false
            },
            data: this.optionData
          },
          {
            type: 'pie',
            name: '外圆环',
            radius: ['53%', '54%'],
            center: ['35%', '50%'],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: 'rgba(32,111,255,0.3)'
              }
            },
            label: {
              show: false
            },
            data: [100]
          },

          {
            type: 'gauge',
            radius: '42%',
            center: ['35%', '50%'],
            clockwise: true,
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 100,
            hoverAnimation: true,
            axisTick: {
              show: false
            },
            splitLine: {
              length: 5,
              lineStyle: {
                width: 1,
                color: 'rgba(32,111,255,0.3)'
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: false
            },
            detail: {
              show: false
            }
          }
        ],
        animationEasing: 'cubicInOut',
        animationDuration: 3000
      })
    },
    // 点击事件
    clickIndustry(param) {
      console.log('数据', param)
      const data = {
        industryFirst: param.data.industryFirst, // 当前下拉框选中的类型
        name: param.data.name // 当前下拉框选中的类型名称
      }
      this.$emit('clickIndustry', data)
    }
  }
}
</script>
